<template>
  <div class="content-container">
    <!-- 工具栏 -->
    <div class="content-tools-wrap hidden">
        <div class="tools-left f-l">
          
          <el-button-group>
        
          </el-button-group>

        </div>
        <div class="tools-right f-r">
          
        <el-button size="mini" type="primary" icon="el-icon-edit" circle></el-button>

        <el-button size="mini" type="primary" icon="el-icon-share" circle></el-button>
      
        </div>
    </div>

    <!-- 内容栏-->
    <div class="content-wrap">
      <div class="content-nav">
        <div v-for="(item,index) in group" :key="index" class="nav-item" :class="{'current':item.active}" @click="groupClick(index,item,group)">
          {{item.platformName}}
        </div>
        <!-- <div class="nav-item current">
          头条号
        </div> -->
      </div>
      <div class="content-result">
          <div class="empty" v-show="bindAccountList.length == 0">
            <div class="empty-img"></div>
            <div class="empty-tip">没有符合条件的内容</div>
          </div>

        <div v-show="bindAccountList.length != 0" class="content-result-item" v-for="(item,index) in bindAccountList">
          <!-- 账号logo -->
          <img class="account-logo" :src="item.img">
          <!-- 账号信息 -->
          <div class="account-info">
            <div class="user-info">用户 {{item.pname}}</div>
            <!-- <div class="account-tip">
              <i class="el-icon-warning"></i>提示:该账号尚未完成注册或未实名认证，暂不能发文</div> -->
          </div>
          <!-- 账号操作 -->
          <div class="account-operate">
            <el-button type="primary" size="mini" icon="el-icon-error" @click="remove(item.id)">解除绑定</el-button>
            <!-- <a :href="item.authUrl">
              <el-button type="primary" size="mini" icon="el-icon-refresh">重新授权</el-button>
            </a> --> 
            <a :href="item.authUrl" target="_blank">
              <el-button type="primary" size="mini" icon="el-icon-refresh" @click="goPlatform(item.indexUrl)">进入后台</el-button>
            </a>   
          </div>
        </div>
      </div>
    </div>



  </div>

</template>

<script>
import { group, bindList, remove } from "@/api/account/list"
import { deepClone } from "@/utils/util"
export default {
  name: 'account-list',

  computed: {
   
  },
  data(){
    return{
      group:[],
      
      bindAccountList:[],
      platfromCode:''
    }
  },
  mounted(){
    this.getGroup();
    this.getBindList();
  },
  methods:{
      //获取绑定的平台
      getGroup(){
        group().then((res)=>{
          console.log("---------获取已绑定的平台----------")
          console.log(res)
          this.group = this.handleGroup(res.data.data);
        })
      },
      handleGroup(data){
        var all = {platformName:'全部',platformCode:'',active:true}
        var result = deepClone(data);
        if(result.length>0){
          for(var i=0; i<result.length;i++){
            result[i]['active'] = false;
          }
          result.unshift(all);
          return result;
        }

        return all;

      },
      //获取绑定账号列表
      getBindList(){
        bindList(this.platfromCode).then((res)=>{
          console.log("---------获取绑定的账号---------")
          console.log(res)
          this.bindAccountList = this.convertPlatformList(res.data.data);
        })
      },
      //转换平台列表数据
      convertPlatformList(data){
        for(var i=0;i<data.length;i++){
          data[i]['img'] = require('@/assets/dingNiu/platform-logo/'+data[i].platformCode+'.png')
        }

        return data;
      },
      //删除绑定
      remove(id){

        this.$confirm('此操作将删除该账号绑定, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(()=>{
          return remove(id);
        }).then((res) => {

            this.getBindList();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
        });

      },
      groupClick(index,item,list){
        this.platfromCode = item.platformCode;
        for(var i=0;i<list.length;i++){
          list[i].active = false
        }
        item.active = true;
        this.getBindList()
      },
      //进入后台
      goPlatform(url){
        window.open(url,"_blank");
      }
  }
}
</script>

<style scoped>
  .content-wrap{
    display: flex;
    flex-direction: row;
    height: 100%;
  }

  .content-wrap .content-nav{
    width: 120px;
    margin-right: 0px;
  }

  .content-nav .nav-item{
    padding: 10px;
    font-size: 14px;
    margin-bottom: 8px;
    background-color: #eee;
    color: #333;
    cursor: pointer;
  }

  .content-nav .nav-item.current{
    color: #ffffff;
    background-color: #ff8100;
  }

  .content-wrap .content-result{
    border:1px solid #d9dbdf;
    flex-grow: 1;
    padding:0 10px;
  }

  .content-result-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }

  .content-result-item .account-logo{
    width:55px;
    height: 55px;
    margin-right: 10px;
  }

  .content-result-item .account-info{
    flex-grow: 1;
  }

  .content-result-item .account-info .user-info{
    color: #333;
    font-size: 14px;
  }

  .content-result-item .account-info .account-tip{
    margin-top: 5px;
    font-size: 12px;
    color: #f56c6c;
  }

  .content-result-item .account-operate{


  }


.empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 400px;
  width: 100%;
}

.empty .empty-tip{
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}

.empty .empty-img{
  margin-top: 100px;
  background-size: 160px 160px;
    height: 160px;
    width: 160px;
  background-image: url();
}
</style>

<style lang="scss" scoped>
.content {
  &-container {

  }

  /***工具栏***/
  &-tools-wrap{
    padding: 15px;
  }
  /***内容栏***/
  &-wrap{
    padding: 15px;
    min-height: 350px;
  }
  /***分页***/
  &-pagination-wrap{
    padding: 15px;
  }
}
</style>
